<template>
  <div class="certificate-coat">
    <el-button type="primary" @click="downloadCertificate">下载证书</el-button>
    <div class="certificate-box" id="certificate" ref="certificate">
      <p class="certificate-name">课程思政培训系统</p>
      <p class="training-certificate">培训证书</p>
      <div class="number-box">
        <img class="left-icon" src="../../../assets/common/left-icon.png" alt="">
        <span class="number-title">证书编号：</span>
        <span class="code">CNT{{code}}</span>
        <img class="right-icon" src="../../../assets/common/right-icon.png" alt="">
      </div>
      <img class="bottom-icon" src="../../../assets/common/bottom-icon.png" alt="">
      <div class="user-name">{{userName}}</div>
      <div class="des">于<span>{{startTime}}</span>至<span>{{endTime}}</span>参加以下课程：</div>
      <div class="course-name">{{courseName}}</div>
      <div class="complete-des">完成学习并通过考评，特发此证！</div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas"
import jsPDF from "jspdf"
import { nextTick, ref, computed } from "vue"
import { getLesson, learnSignUp } from "@/api/learn/lesson"
import { useRoute } from "vue-router"
export default {
  name: "CertificateIndex",
  setup() {
    const courseName = ref("") // 课程名称
    const userName = ref("") // 课程名称
    const startTime = ref("") // 开始时间
    const endTime = ref("") // 结束时间
    const courseID = ref(0) // 课程Id
    const memberId = ref(0) // 用户Id
    const route = useRoute();
    const {lessonId, signUpId} = route.query
    learnSignUp({
      lessonId, id: signUpId
    }, res => {
      if(res.member) {
        userName.value = res.member.name
        const day = res.createTime.split(" ")[0].split("-")
        startTime.value = day[0] + "年" + day[1] + "月" + day[2] + "日"
        if(res.completedTime) {
          const endDay = res.completedTime.split(" ")[0].split("-")
          endTime.value = endDay[0] + "年" + day[1] + "月" + day[2] + "日"
        }
        courseID.value = res.lessonId
        memberId.value = res.memberId
      }
    })
    getLesson(lessonId, data => {
      console.log(data)
      courseName.value = data.name
    })
    // 设置编号  编号等于  日期 + 课程id  + 用户id这样
    const code = computed(() => {
      return endTime.value + courseID.value + memberId.value
    })
    const downloadCertificate = () => {
      nextTick(() => { // 使用$nextTick，解决数据还没有渲染到html就先转为图片，此时的图片会是空内容的问题
        const canvas = document.createElement("canvas") // 创建一个canvas节点
        const shareContent = document.getElementById("certificate") // 需要截图的包裹的（原生的）DOM 对象
        const width = shareContent.offsetWidth // 获取dom 宽度
        const height = shareContent.offsetHeight // 获取dom 高度
        const scale = 2 // 定义任意放大倍数 支持小数
        canvas.getContext("2d").scale(scale, scale) // 获取context,设置scale
        const rect = shareContent.getBoundingClientRect() // 获取元素相对于视口的
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 获取滚动轴滚动的长度
        html2canvas(document.getElementById("certificate"), { // 转换为图片
          x: rect.left + 8, // 绘制的dom元素相对于视口的位置
          y: rect.top,
          scrollY: -scrollTop,
          scale: scale, // 添加的scale 参数
          width: width, // dom 原始宽度
          height: height,
          useCORS: true, // 开启跨域
          dpi: window.devicePixelRatio * 2
        }).then(canvas => {
          const context = canvas.getContext("2d")
          // 关闭抗锯齿
          context.mozImageSmoothingEnabled = false
          context.msImageSmoothingEnabled = false
          context.imageSmoothingEnabled = false
          const imgUrl = canvas.toDataURL("image/jpeg");
          var doc = new jsPDF("p", "mm", "a4");
          doc.addImage(imgUrl, "JPEG", 0, 0, 210, 297);
          doc.save("my-certificate" + ".pdf");
          // var a = document.createElement("a")
          // a.download =  "my-certificate"
          // // 设置图片地址
          // a.href = imgUrl;
          // a.click();
        })
      })
    }
    return {
      downloadCertificate,
      courseName,
      userName,
      startTime,
      endTime,
      code
    }
  }
}
</script>

<style scoped lang="scss">
.certificate-coat {
  padding: 20px 0;
  box-sizing: border-box;
  .el-button {
    float: right;
  }
  .certificate-box {
    width: 800px;
    height: 1130px;
    position: relative;
    margin: 0 auto;
    padding-top: 216px;
    box-sizing: border-box;
    background-image: url("../../../assets/common/certificate.jpg");
    background-repeat: no-repeat;
    background-size: 800px 1130px;
    .certificate-name {
      font-size: 20px;
      letter-spacing: 3px;
      text-align: center;
    }
    .training-certificate {
      margin-top: 30px;
      font-size: 60px;
      font-weight: bold;
      color: #bf2d1e;
      text-align: center;
      letter-spacing: 10px;
      text-shadow: 0px 3px 0px #ddd;
    }
    .number-box {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      margin-top: 46px;
      .left-icon, .right-icon {
        width: 18px;
        height: 18px;
      }
      .number-title {
        color: #000;
        margin-left: 15px;
      }
      .code {
        color: #bf2d1e;
        margin-right: 15px;
      }
    }
    .bottom-icon {
      display: block;
      margin: 0 auto;
      width: 410px;
      height: 30px;
      margin-top: 10px;
    }
    .user-name {
      padding: 5px 10px;
      width: auto;
      display: inline-block;
      border-bottom: 2px solid #616161;
      margin-left: 110px;
      font-size: 20px;
      font-weight: 600;
      letter-spacing: 5px;
      color: #bf2d1e;
      margin-top: 66px;
    }
    .des {
      font-size: 20px;
      color: #616161;
      text-align: center;
      margin-top: 48px;
      span {
        letter-spacing: 2px;
      }
    }
    .course-name {
      text-align: center;
      letter-spacing: 5px;
      font-size: 30px;
      font-weight: 600;
      color: #bf2d1e;
      margin-top: 20px;
    }
    .complete-des {
      margin-left: 110px;
      font-size: 20px;
      color: #616161;
      margin-top: 26px;
    }
  }
}
</style>
